import { Card, Form, Input, Button } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function Login() {
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const handleLogin = (values) => {
        console.log('登录信息：', values);
        navigate('/home');
    };

    return (
        <Card style={{ width: 400, margin: ' auto' ,'margin-top' : '200px' }}>
            <Form
                form={form}
                onFinish={handleLogin}
            >
                <h2 style={{ textAlign: 'center' }}>登录</h2>
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名！' }]}
                >
                    <Input 
                        placeholder="用户名" 
                        autoComplete="username"
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码！' }]}
                >
                    <Input.Password 
                        placeholder="密码"
                        autoComplete="current-password"
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    );
}
function Register() {
    const [form] = Form.useForm();
    const [passwordVisible, setPasswordVisible] = useState(false);
    const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);

    const handleRegister = (values) => {
        console.log('注册信息：', values);
    };

    return (
        <Card style={{ width: 400, margin:'auto','margin-top' : '200px' }}>
            <Form
                form={form}
                onFinish={handleRegister}
            >
                <h2 style={{ textAlign: 'center' }}>注册</h2>
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名！' }]}
                >
                    <Input
                        placeholder="用户名"
                        autoComplete="username"
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码！' }]}
                >
                    <Input.Password
                        placeholder="密码"
                        autoComplete="current-password"
                        visible={passwordVisible}   
                        onChange={(e) => setPasswordVisible(e.target.visible)}
                    />
                </Form.Item>
                <Form.Item
                    name="confirmPassword"
                    rules={[{ required: true, message: '请再次输入密码！' }, ({ getFieldValue }) => ({
                        validator(_, value) {
                            if (!value || getFieldValue('password') === value) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('两次输入的密码不一致！'));
                        }
                    })]}
                >
                    <Input.Password
                        placeholder="确认密码"
                        autoComplete="current-password"
                        visible={confirmPasswordVisible}
                        onChange={(e) => setConfirmPasswordVisible(e.target.visible)}
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" block>
                        注册
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    )   
}

export { Login, Register };